<template>
  <view class="login-container">
    <view class="login-box">
      <text class="login-title">用户登录</text>
      <!-- 账号输入 -->
      <view class="input-item">
        <text class="input-label">账号</text>
        <input 
          class="input-content" 
          v-model="username" 
          placeholder="请输入手机号/用户名"
        ></input>
      </view>
      <!-- 密码输入 -->
      <view class="input-item">
        <text class="input-label">密码</text>
        <input 
          class="input-content" 
          v-model="password" 
          type="password" 
          placeholder="请输入密码"
        ></input>
      </view>
      <!-- 登录按钮 -->
      <button class="login-submit-btn" @click="handleLogin">
		  登录</button>
      <!-- 快速登录/注册入口 -->
      <view class="login-other">
        <text class="quick-login" @click="quickLogin">验证码登录</text>
        <text class="register" @click="goToRegister">
		<navigator url="/pages/login/register/register">
			注册账号
		</navigator>
		</text>
      </view>
    </view>
  </view>
</template>

<script>
	import CustomTextView from"../cardViewPage/cardViewPage.vue"
export default {
  name: "LoginPage",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    // 模拟登录（实际项目需调用后端接口）
    handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({
          title: "账号/密码不能为空",
          icon: "none"
        });
        return;
      }
      // 模拟登录成功，存储用户信息（可自定义头像/昵称等）
      const loginInfo = {
        avatar: "/static/avatar-user.png", // 登录后默认头像
        nickname: "我的昵称",
        followCount: 3,
        topicCount: 0
      };
      uni.setStorageSync("loginInfo", loginInfo);
      uni.showToast({
        title: "登录成功",
        icon: "success"
      });
      // 跳转回个人中心
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000);
    },
    // 验证码登录（预留）
    quickLogin() {
      uni.showToast({
        title: "验证码登录开发中",
        icon: "none"
      });
    },
    // 注册账号（预留）
    goToRegister() {
      uni.navigateTo({
        url: "/pages/register/registerPage"
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  padding-top: 60px;
}
.login-box {
  width: 90%;
  max-width: 400px;
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.login-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}
.input-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 4px;
}
.input-label {
  font-size: 14px;
  color: #666;
}
.input-content {
  height: 44px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
}
.login-submit-btn {
  width: 100%;
  height: 44px;
  background-color: skyblue;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 10px 0 20px;
}
.login-other {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.quick-login, .register {
  color: #ff4d4f;
}
</style>
